<template>
	<view class="bg-light flex flex-column" :style="'padding-bottom:' + fixedHeight + 'px'">
		<!-- 编辑 -->
		<view class="font bg-white justify-end align-center px-3 flex" v-if="shopCar.length > 0 ? true : false"
			style="height: 70rpx; line-height: 70rpx;" @click="switchMethods">
			<view class="mr-3" style="widht:2rpx; border-left: 1px solid #ababab; height:38rpx;">
			</view>
			{{ !switchBoolean ? "编辑" : "完成"}}
		</view>
		<!--  -->
		<view class="w-100 flex justify-center align-center flex-column" v-if="shopCar.length > 0 ? false : true"
			style="height: 80vh">
			<view class="flex flex-column align-center mb-4" style="width: 50%">
				<image style="width: 600rpx" :src="Domain_ICON + '/zanwugouwu.png'" mode="widthFix"></image>
				暂未相关购买记录,赶紧去买点东西犒劳下自己吧
			</view>
			<view @click="goIndex()"
				class="pr-10 pl-10 pt-1 pb-1 flex justify-center align-center font-weight-bold font-md"
				style="color: orange; border: 2rpx solid orange; border-radius: 30rpx">去购物</view>
		</view>
		<!--  -->
		<scroll-view scroll-y="true" class="scroll-Y" v-else>
			<view
        @click="changeAll(index)"
        v-for="(item, index) in shopCar" :key="index"
        class="m-3 rounded-lg flex bg-white align-center"
        style="position: relative">
				<uni-swipe-action class="w-100">
					<uni-swipe-action-item class="w-100"
            :right-options="options2" :show="isOpened"
            :auto-close="false"
						@click.stop="deleteGoods(item.Sales_Order_SerialNumber, index)">
            <view class="flex align-center p-2">
              <checkbox style="transform: scale(0.7)" :disabled="!item.isShow" :checked="item.isSettle" />
              <view class="ml-1 flex">
                <view class="flex-shrink" style="position: relative">
                  <image
                    :lazy-load="true"
                    @click.stop="
                            goDetail(
                              item.Article_SerialNumber,
                              item.Sales_Unit_Price_SerialNumber,
                              item.Store_SerialNumber,
                              item.Sales_Unit_Price
                            )
                          "
                    :src="Domain_IMG + item.Picture_URL"
                    class="rounded"
                    style="width: 160rpx;
                    height: 160rpx"
                    mode="">
                  </image>
                  <view v-if="!item.isShow"
                    class="rounded font text-white flex justify-center align-center" style="
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 160rpx;
                            height: 160rpx;
                            background-color: rgba(0, 0, 0, 0.7);
                          ">
                    已下架
                  </view>
                  <view v-if="item.Activity == '1'" class="rounded font-small text-white bg-info px-1"
                    style="position: absolute; top: 0; left: 0">
                    活动
                  </view>
                </view>
                <view class="ml-2 text-ellipsis" style="width: 400rpx; position: relative">
                  <text class="font">{{ item.Article_Name }}</text><br />
                  <text class="font-sm text-muted">品牌:{{ item.Category_Name }}</text><br />
                  <text class="font-sm text-muted">规格:{{ item.Specifications_Name }}</text>
                  <text class="text-info font font-weight-bold"
                    style="position: absolute; bottom: 0; left: 0">￥{{ Price(item.Sales_Unit_Price) }}</text>
                  <view v-if="item.isShow" class="flex" style="position: absolute; bottom: 0; right: 0">
                    <view @click.stop="subGoods(index, item.Article_SerialNumber)"
                      class="font-md text-center flex justify-center align-center" style="
                              background-color: #eee;
                              width: 50rpx;
                              height: 50rpx;
                              border-bottom-left-radius: 20rpx;
                              border-top-left-radius: 20rpx;
                            ">-</view>
                    <input @click.stop="" type="number" v-model="item.Quantity" class="text-center font"
                      style="
                              border-left: 2rpx solid #ddd;
                              border-right: 2rpx solid #ddd;
                              width: 50rpx;
                              height: 50rpx;
                              background-color: #eee;
                            " />
                    <view @click.stop="addGoods(index, item.Article_SerialNumber)"
                      class="font-md minus text-center flex justify-center align-center" style="
                              background-color: #eee;
                              width: 50rpx;
                              height: 50rpx;
                              border-bottom-right-radius: 20rpx;
                              border-top-right-radius: 20rpx;
                            ">+</view>
                  </view>
                </view>
              </view>
            </view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</scroll-view>
		<!--  -->
		<view id="fixed" class="bg-white py-1 px-3 fixed-bottom flex justify-between align-center"
			style="bottom: 110rpx" v-if="!switchBoolean">
			<view class="font-sm flex align-center" @click="changeAll_">
				<checkbox style="transform: scale(0.7)" :checked="isSettle" />全选
			</view>

			<view class="flex align-center">
				<view class="font mr-2">
					合计<text class="font-weight-bold font-md">￥{{ Price(Quantity) }}</text>
				</view>
				<view class="bg-info rounded text-center py-2 text-white font-sm" style="width: 220rpx"
					@click="handleSkip(1)" hover-class="bg-hover-info" :hover-stay-time="150">去结算</view>
			</view>
		</view>
		<!-- 多删除 -->
		<view id="fixed" class="bg-white py-1 px-3 fixed-bottom flex justify-between align-center"
			style="bottom: 110rpx" v-else>
			<view class="font-sm flex align-center" @click="changeAll_">
				<checkbox style="transform: scale(0.7)" :checked="isSettle" />全选
			</view>

			<view class="flex align-center">
				<view class="bg-danger rounded text-center py-2 text-white font-sm" style="width: 220rpx"
					hover-class="bg-hover-info" :hover-stay-time="150" @click="Multiple_deletions" :disabled="disabled">删除</view>
			</view>
		</view>
		<!-- 底部切换 -->
		<tabsBottom :tabId="2"></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import {
		NowTime
	} from "@/static/js/DateUtil.js";
	import {
		accMul,
		accAdd
	} from "@/static/js/GeneralUtil.js";
	import {
		WXEditShopCarQuantity,
		WXClearShopCarQuantity
	} from "@/api/article.js";
	export default {
		components: {
			tabsBottom,
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG, //全局变量域名
				ShareOpenID: "",
				fixedHeight: 0, //底部元素高度
				isSettle: false, //全选按钮
				shopCar: [], //购物车数据
				NewShopCar: [], //选中购物车数据
				Delete_Car: [], //删
				Quantity: "0.00", //合计
				show: null,
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
				form: {
					Data: "表名",
					// Enterprise_Info_SerialNumber: uni.getStorageSync(""),//状态
					page: 1, //页数
					limit: 10 //每页数据条数
				},
				switchBoolean: false,
				options2: [{
					text: "删除",
					style: {
						backgroundColor: "#F56C6C",
					},
				}, ],
				isOpened: "none",
        disabled:false,//是否禁用
			};
		},
		computed: {
			Price() {
				//补零
				return function(price) {
					if (price) {
						if (RegExp(/\./).exec(price)) {
							return price;
						} else {
							return price + ".00";
						}
					} else {
						return "0.00";
					}
				};
			},
		},
		onLoad() {
			this.fixed();
			this.selectGoods();
		},
		methods: {
			//多条删除
			 Multiple_deletions() {
        const _this = this;
        _this.disabled = true
        uni.showModal({
					title: "提示",
					content: "确定要删除所选商品吗?",
					success: async function(res) {
						if (res.confirm) {
							// 调接口删除
              const res = await WXClearShopCarQuantity({
                Open_ID: app.globalData.openid,
                Sales_Order_SerialNumber: JSON.stringify(_this.Delete_Car)
              })
              _this.selectGoods();
              _this.disabled = false;
						} else if (res.cancel) {
							uni.showToast({
								title: "已取消",
								icon: "none",
							});
						}
					},
				});
			},
			//切换
			switchMethods() {
				this.switchBoolean = !this.switchBoolean
			},

			fixed() {
				//底部模块高度获取
				const query = uni.createSelectorQuery();
				query
					.select("#fixed")
					.boundingClientRect((data) => {
						this.fixedHeight = data.height;
					})
					.exec();
			},
			//查询购物车内容
			selectGoods() {
				uni.request({
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					url: app.globalData.Domain_Name + "/WX2ShopCarAll", //购物车
					method: "POST",
					data: {
						Open_ID: app.globalData.openid,
						Enterprise_Info_SerialNumber: app.globalData.enterprise,
						App_ID: app.globalData.appid,
					},
					success: (res) => {
						this.shopCar = res.data;
						console.log(this.shopCar)
						this.shopCar.forEach((item, index) => {
							item.isSettle = false;
						});
					},
				});
			},
			calculate() {
				let Amount = 0;
				if (this.NewShopCar.length > 0) {
					this.NewShopCar.forEach((item) => {
						Amount = accAdd(Amount, item.Amount);
					});
				}
				this.Quantity = Amount;
			},
			goDetail(
				Article_SerialNumber,
				Sales_Unit_Price_SerialNumber,
				Store_SerialNumber,
				Sales_Unit_Price
			) {
				uni.navigateTo({
					url: "/pages/index/details?Article_SerialNumber=" +
						Article_SerialNumber +
						"&Sales_Unit_Price_SerialNumber=" +
						Sales_Unit_Price_SerialNumber +
						"&Store_SerialNumber=" +
						Store_SerialNumber +
						"&Sales_Unit_Price=" +
						Sales_Unit_Price +
						"&ShareOpenid=" +
						this.ShareOpenID,
				});
			},
			changeAll(index) {
				this.shopCar[index].isSettle = !this.shopCar[index].isSettle;
				this.NewShopCar = this.shopCar.filter((item) => {
					return item.isSettle == true;
				});
				this.Delete_Car = this.shopCar.map(item => item.Sales_Order_SerialNumber);
				this.calculate();
				//全选状态
				if (this.NewShopCar.length == this.shopCar.length) {
					this.isSettle = true;
				} else {
					this.isSettle = false;
				}
			},
			changeAll_() {
				if (this.shopCar.length > 0) {
					this.isSettle = !this.isSettle;
					if (this.isSettle == true) {
						this.shopCar.forEach((item) => {
							if (item.isShow) {
								item["isSettle"] = true;
							}
						});
						this.NewShopCar = this.shopCar.filter((item) => item.isShow);
						this.Delete_Car = this.shopCar.map(item => item.Sales_Order_SerialNumber);
						this.calculate();
					} else {
						this.shopCar.forEach((item) => {
							item["isSettle"] = false;
						});
						this.NewShopCar = [];
						this.calculate();
					}
				}
			},
			handleSkip(i) {
				if (this.NewShopCar.length > 0) {
					uni.setStorageSync(
						"Store_SerialNumber",
						this.NewShopCar[0].Store_SerialNumber
					);
					uni.navigateTo({
						url: `/pages/index/submitOrder?SalesOrder=${encodeURIComponent(
            JSON.stringify(this.NewShopCar)
          )}&key=${i}`,
					});
				} else {
					uni.showToast({
						title: "请选择商品后再结算",
						icon: "none",
					});
				}
			},
			async subGoods(index, Article_SerialNumber) {
				if (this.shopCar[index].Quantity > 1) {
					if (this.loading) return;
					this.loading = true;
					uni.showLoading({
						title: "提交中...",
					});
					this.jia_and_jian(index);
					this.shopCar[index].Quantity--;
					this.shopCar[index].Amount = accMul(
						this.shopCar[index].Sales_Unit_Price,
						this.shopCar[index].Quantity
					);
					const res = await WXEditShopCarQuantity({
						Article_SerialNumber,
						Open_ID: app.globalData.openid,
						Type: 0,
					});
					uni.hideLoading();
					this.loading = false;
				} else {
					uni.showToast({
						title: "不能再减少了哦",
						icon: "error",
					});
				}
			},
			async addGoods(index, Article_SerialNumber) {
				if (this.loading) return;
				this.loading = true;
				uni.showLoading({
					title: "提交中...",
				});
				this.jia_and_jian(index);
				this.shopCar[index].Quantity++;
				this.shopCar[index].Amount = accMul(
					this.shopCar[index].Sales_Unit_Price,
					this.shopCar[index].Quantity
				);
				const res = await WXEditShopCarQuantity({
					Article_SerialNumber,
					Open_ID: app.globalData.openid,
					Type: 1,
				});
				uni.hideLoading();
				this.loading = false;
			},
			deleteGoods(id, index) {
				//删除购物车里的商品
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确定要删除该商品吗?",
					success: function(res) {
						if (res.confirm) {
							// 调接口删除
							uni.request({
								header: {
									"Content-Type": "application/x-www-form-urlencoded",
								},
								url: app.globalData.Domain_Name + "/WXCancelShopCar",
								method: "POST",
								data: {
									Open_ID: app.globalData.openid,
									Enterprise_Info_SerialNumber: app.globalData.enterprise,
									Sales_Order_SerialNumber: id,
								},
								success: (res) => {
									if (res.data.Status == "success") {
										_this.selectGoods();
										uni.showToast({
											title: "删除成功",
											icon: "none",
										});
										_this.jia_and_jian(index);
									}
								},
							});
						} else if (res.cancel) {
							uni.showToast({
								title: "已取消",
								icon: "none",
							});
						}
					},
				});
			},
			jia_and_jian(index) {
				this.shopCar[index].isSettle = false;
				this.NewShopCar = this.shopCar.filter((item) => {
					return item.isSettle == true;
				});
				this.calculate();
				//全选状态
				if (this.NewShopCar.length == this.shopCar.length) {
					this.isSettle = true;
				} else {
					this.isSettle = false;
				}
			},
			goIndex() {
				uni.redirectTo({
					url: "/pages/index/index",
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #f8f9fa;
	}
</style>
<style>
</style>